<template>
	<div>
		<div :class="[upAppTip]" @touchmove.prevent ref="upAppTip" :style="{top:boxScroll+'px'}">
			<div class="upapp-box">
				<div class="upappOk" @click="clickUpAppOk"></div>
				<div class="upappClose" @click="clickUpAppClose"></div>
			</div>
		</div>
		<YKTipPage v-if="YKLinkIs" @sendYKMsg="parentAcceptMsg" :style="{top:boxScroll+'px'}"></YKTipPage>
		<footer class="fixBottomBox" :class="{'zyzqBottom':but, 'bt-none':isBt ,'zxyh-ios':isZxyhIos,'zhxyk-footer':zhxyk} " :style='' v-if="isFooter">
			<template v-if="onlyChannel==='zgyh'|| onlyChannel==='zgyhpx'">
				<NavBottomZhonghang @sendParentMsg="acceptDataMsg"></NavBottomZhonghang>
			</template>
		    <template v-else-if=" onlyChannel==='zxyh'">
				<NavBottomZXYH :msgParent.sync='isBt'></NavBottomZXYH>
			</template>
			 <template v-else-if=" onlyChannel==='zhxyk'">
				<NavBottomZHXYK  :msgParent.sync='zhxyk' />
			</template>
			<template v-else-if=" onlyChannel==='zyzq'">
				<NavBottomZYZQ :msgParent.sync='but'></NavBottomZYZQ>
			</template>
			<!--中信信用卡中心-->
			<template v-else-if=" onlyChannel==='zxxykzx'">
				<NavBottomZXXYKZX :msgParent.sync='isBt'></NavBottomZXXYKZX>
			</template>
			<template v-else-if="onlyChannel==='zgrscc'">
				<NavBottomZGRS></NavBottomZGRS>
			</template>
			<!-- <template v-else-if="onlyChannel==='zyzq'">
				<NavBottomZYZQ></NavBottomZYZQ>
			</template> -->
			<template v-else>
				<NavBottomDefault @sendParentMsg="acceptDataMsg"></NavBottomDefault>
			</template>
		</footer>
	</div>
</template>
<script>
	import NavBottomDefault from "../components/defult/navBottomInfo";
	import NavBottomZhonghang from "../components/zhonghang/navBottomInfo";
	import NavBottomZGRS from "../components/zgrscc/navBottomInfo"; //中国人寿
	import NavBottomZYZQ from "../components/zyzq/navBottomInfo"; //中银证券
	import NavBottomZXYH from "../components/zxyh/navBottomInfo"; //中信银行
	import NavBottomZXXYKZX from "../components/zxxykzx/navBottomInfo"; //中信信用卡中心
	import NavBottomZHXYK from "../components/zhzxk/navBottomInfo"; //中行信用卡
	import YKTipPage from "../components/zhonghang/YKTipPage";
	export default {
		data() {
			return {
				but: false,
				isBt: false,
				zhxyk:false,
				shoppingHref: "",
				resultLink: "",
				isShow: false, //链接商城是否显示
				upAppTip: "upAppTip1",
				onlyChannel: this.$channel,
				boxScroll: "",
				YKLinkIs: false,
				isZxyhIos:false
			}
		},
		components: {
			NavBottomDefault,
			NavBottomZhonghang,
			NavBottomZGRS,
			NavBottomZYZQ,
			NavBottomZXYH,
			NavBottomZXXYKZX,
			NavBottomZHXYK,
			YKTipPage,
		},
		created: function() {
			this.isFooterShow = true
			if(this.$channel =='zxyh' && isIos){//中信银行app小黑条挡住内容
				this.isZxyhIos =true
			}
			if(this.$channel =='zhxyk'){//判断中行信用卡app
				this.zhxyk = true
			}
		},
		destroyed: function() {
			//清除scroll时间
			this.isFooterShow = false
		},
		props: {
			list: Array,
			chanel: {
				type: String,
				default: "default"
			}
		},
		mounted() {
			let _this = this;
			window.addEventListener('scroll', () => {
				let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
				//console.log(scrollTop)
				_this.boxScroll = scrollTop
			})
		},
		computed: {
			isFooter() {
				return this.$store.state.isShowNav
			}
		},
		methods: {
			//子组件发射过来的方法
			acceptDataMsg(msg) {
				switch(msg.type) {
					case 'link':
						break;
					case 'ykLink':
						this.YKLinkIs = true
						break;
				}
			},
			parentAcceptMsg(msg) {
				switch(msg.type) {
					case 'clickCancel':
						this.YKLinkIs = false;
						break;
					default:
				}
			},
			//关闭app升级界面
			clickUpAppClose() {
				this.upAppTip = "upAppTip1"
			},
			//点击app升级 跳转
			clickUpAppOk() {
				window.location.href = "http://a.app.qq.com/o/simple.jsp?pkgname=com.chinamworld.bocmbci"
			},
		},

	};
</script>

<style>
	/*固定底部通栏*/

	.fixBottomBox {
		width: 100%;
		height: 96px;
		position: fixed;
		bottom: 0;
		left: 0;
		background: -webkit-linear-gradient( top bottom, rgb(253, 253, 253), rgb(231, 231, 231));
		/* Safari 5.1 - 6.0 */
		background: -o-linear-gradient( top bottom, rgb(253, 253, 253), rgb(231, 231, 231));
		/* Opera 11.1 - 12.0 */
		background: -moz-linear-gradient( top bottom, rgb(253, 253, 253), rgb(231, 231, 231));
		/* Firefox 3.6 - 15 */
		background: linear-gradient( top bottom, rgb(253, 253, 253), rgb(231, 231, 231));
		/* 标准的语法（必须放在最后） */
		background: white;
		border-top: 1px solid #dedede;
		z-index: 100;
	}

	footer.zyzqBottom {
		height: 129px;
		background: url("../assets/images/zyzq/zyzq-bottom.png") no-repeat;
		background-size: 750px 129px;
		border-top: none;
		box-shadow: 20px 10px darkcyan;
	}

	footer.bt-none {
		height: 98px;
		border-top: none;
	}
	footer.zxyh-ios{
		height: 140px;
	}

/* 	.bigbox {
		width: 750px;
		height: auto;
	} */

	.fixBottomBox i {
		font-size: 40px;
		color: #c5c5c5;
	}

	.router-link-active i {
		color: rgb(204, 45, 48);
	}

	.router-link-active p {
		color: #cc2d30;
	}

	.fixBottomBox ul {
		height: 96px;
		display: flex;
		display: -webkit-flex;
		justify-content: space-around;
		-webkit-justify-content: space-around;
		align-items: center;
	}

	.fixBottomBox ul li {
		width: 19%;
		display: flex;
		display: -webkit-flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		-webkit-flex-wrap: wrap;
		-webkit-justify-content: center;
		-webkit-align-items: center;
	}

	.iconPic {
		width: 40px;
	}

	.nav-icon-title {
		font-size: 26px;
		color: #666666;
		width: 100%;
		height: 100%;
		text-align: center;
		margin-top: 5px;
	}

	.nav3 {
		width: 80px;
		height: 80px;
	}

	.upAppTip {
		width: 750px;
		height: 100%;
		background: rgba(0, 0, 0, 0.4);
		position: absolute;
		top: 0;
		left: 0;
		z-index: 10500;
	}

	.upapp-box {
		width: 486px;
		height: 635px;
		background: url(../assets/images/upapp.png) no-repeat;
		background-size: 486px 635px;
		margin: 400px 0 0 130px;
	}

	.upappOk {
		width: 100%;
		height: 74px;
		margin-top: 420px;
		float: left;
	}

	.upappClose {
		width: 100%;
		height: 75px;
		margin-top: 65px;
		float: left;
	}

	.upAppTip1 {
		width: 750px;
		height: 100%;
		background: rgba(0, 0, 0, 0.4);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 105;
		display: none;
	}
	.zhxyk-footer{
		width: 750px;
		height: 128px;
		background: rgba(255,255,255,0.95);
		box-shadow: 0px -3px 3px 0px rgba(0, 0, 0, 0.03);
		z-index: 1;
		display: none;
	}
</style>
